<template>
  <div class="container-pt">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed title="列表" />
    <van-tabs v-model="cateid" animated swipeable @click="onClick" sticky>
      <van-tab v-for="item in allCate" :key="item.id" :name="item.id">
        <template #title>
          <van-icon name="more-o" />{{ item.catename }}</template
        >
        <div class="article-list">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <article-list
              v-for="(item, index) in list"
              :key="index"
              :item="item"
            />
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import articleList from '@/components/article-list.vue'
import { getList } from '@/api/artice'
export default {
  components: { articleList },
  data () {
    return {
      cateid: 1,
      allCate: [],
      page: 1,
      limit: 20,
      list: [],
      loading: false,
      finished: false,
    };
  },
  async created () {
    this.cateid = +this.$route.params.id
    await this.$store.dispatch('cateAction')
    this.allCate = this.$store.state.allCate
  },
  methods: {
    async onClick (name) {
      this.loading = true
      this.finished = false
      console.log('onclick')
      this.cateid = name
      this.page = 1
      console.log(this.cateid)
      const res = await getList({
        page: this.page,
        limit: this.limit,
        cateid: this.cateid
      })
      this.list = res.data.list.data
    },
    async onLoad () {
      console.log('onload')
      const res = await getList({
        page: this.page,
        limit: this.limit,
        cateid: this.cateid
      })
      
      this.loading = false
      this.page++
      if (this.list.length > 0 && res.data.list.currentPage === 1) {
        return
      }
      this.list.push(...res.data.list.data)
      console.log(this.page > res.data.list.totalPages)
      if (this.page > res.data.list.totalPages) {
        this.finished = true
      }
    },
  },
};
</script>

<style>
img {
  width: 100%;
}
.van-sticky--fixed {
  top: 93px !important;
}
</style>